<template>
	<view class="avatar shuipingchuizhi">
		<template v-if="size == 'small'">
			<view class="avatar_box shuipingchuizhi">
				<view class="avatar_box_name">
					{{computedNam(name)}}
				</view>
			</view>
		</template>
		<template v-if="size == 'big'">
			<view class="avatar_bigbox shuipingchuizhi">
				<view class="avatar_bigbox_bigname">
					{{computedNam(name)}}
				</view>
			</view>
		</template>
		<template v-if="size == 'verybig'">
			<view class="avatar_verybigbox shuipingchuizhi">
				<view class="avatar_verybigbox_bigname">
					{{computedNam(name)}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		subStrName
	} from '@/utils/index.js'
	export default {
		props: {
			name: {
				requred: true,
				type: String,
				default () {
					return '无'
				}
			},
			size: {
				requred: true,
				type: String,
				default () {
					return 'small'
				}
			}
		},
		methods: {
			computedNam(name) {

				const size = this.size
				switch (size) {
					case 'small':
						const newname = subStrName(name, 'small')

						return newname
						break;
					case 'big':
						const newBigname = subStrName(name, 'big')

						return newBigname
						break;
					case 'verybig':
						const newverybigname = subStrName(name, 'verybig')
						console.log(newverybigname, 44)
						return newverybigname
						break;

				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.avatar {
		width: 100%;
		height: 100%;

		&_box {
			width: 25rpx;
			height: 25rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #0089ff;

			&_name {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 25rpx;
				line-height: 25rpx;
				text-align: center;
				transform: scale(0.5);
			}
		}

		&_bigbox {
			width: 80rpx;
			height: 80rpx;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #0089ff;

			&_bigname {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 25rpx;
				line-height: 80rpx;
				text-align: center;

			}
		}

		&_verybigbox {
			width: 128rpx;
			height: 128rpx;
			overflow: hidden;
			background-color: #0089ff;

			&_bigname {
				color: #fff;
				width: 100%;
				height: 100%;
				font-size: 35rpx;
				line-height: 128rpx;
				text-align: center;

			}
		}
	}
</style>
